<template>
    <view class="main-pd u-p-t-28">
        <view class="active-list" v-if="dataList.length&&!loading">
        <view class="active-item" v-for="item in dataList" :key="item.id">
          <view class="u-flex">
            <view class="u-m-r-26">
              <u-image :src="picUrls(item.pics)" width="220rpx" height="146rpx" radius="9rpx"></u-image>
            </view>
            <view class="u-flex-grow">
              <view class="title u-line-1">{{ item.title }}</view>
              <view class="u-flex u-flex-between">
                <view :class="[statusClass(item.state), 'status']">{{ activeStatus(item.state) }}</view>
                <view class="color-bfbfbf font-24" @click="$u.route('/pages/hdcy/hdcyDetail',{id:item.activityId,onlyDetail:true})">查看详情</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-show="loading">
      <u-skeleton rows="5" title loading></u-skeleton>
    </view>
      <view class="empty-con">
		<u-empty mode="list" :show="!dataList.length&&!loading"></u-empty>
	  </view>
    </view>
</template>

<script setup>
import { onLoad,onShow } from "@dcloudio/uni-app";
import { ref, reactive, computed } from "vue";
import {getactiverecordApi} from "@/api/index"
import {useList} from "@/hooks/useList"
import useInfoStore from "@/store/user"
import config from "@/config"
import activeIcon from "../../static/images/active.jpg"
const userStore = useInfoStore()
const {loadData,dataList,page,loading} = useList({
    listApi: getactiverecordApi,
    otherParam: { dzyzkId: userStore.dzyzkId},
})
// 活动状态判断
const activeStatus = computed((status) => {
  return function (status) {
    let statusArr = ["活动未开始", "活动进行中", "活动已结束"]
    return statusArr[status]
  }
})
const statusClass = computed((status) => {
  return function (status) {
    return "status" + status
  }
})
const picUrls = computed((pics)=>(pics)=>{
  let picArr = JSON.parse(pics);
 return picArr.length?config.baseUrl+picArr[0].fileurl: activeIcon
})
onLoad(()=>{
  page.value = 1
  dataList.value = []
    loadData({dzyzkId: userStore.dzyzkId})
})
</script>

<style lang="scss" scoped>
 .active-item {
      border-bottom: 1rpx solid #f0f0f0;
      padding-bottom: 48rpx;
      margin-top: 32rpx;

      .title {
        font-size: 32rpx;
        color: #333;
        padding: 7rpx 0 58rpx 0;

      }

      .status {
        width: 132rpx;
        height: 40rpx;
        border-radius: 6rpx;
        font-size: 22rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .status0 {
        background-color: #f0f0f0;
        color: #595959;
      }

      .status1 {
        background-color: #edf9e8;
        color: #52c41a;
      }

      .status2 {
        background-color: #ffedee;
        color: #ff4d4f;
      }
    }
</style>